{include file="public/header,public/nav,public/fixbar" title="我的直播课-<?php echo request()->pc_info['seo_title']?>"/}
<div class="layui-body">
    <div class="layui-container">
        <div class="layui-col-space15">
            <!-- 菜单栏 -->
            <div class="layui-col-xs12 layui-col-sm4 layui-col-md4 layui-col-lg3">
                <div class="layui-main user-main min-height-90vh">
                    {include file="user/menu"/}
                </div>
            </div>
            <div class="layui-col-xs12 layui-col-sm8 layui-col-md8 layui-col-lg9">
                <div class="layui-main user-main min-height-90vh">
                    <h2>我的直播课</h2>
                    <form class="layui-form layui-form-pane form-search">
                        <div class="layui-form-item" style="margin-bottom: 5px;">
                            <div class="layui-col-xs12 layui-col-md6 layui-col-lg4" style="float: right;">
                                <input id="keyword" value="" class="layui-input" placeholder="输入直播课名称">
                                <button class="layui-btn layui-bg-success" lay-submit lay-filter="data-search-btn">
                                    <i class="layui-icon layui-icon-search"></i> 搜索
                                </button>
                            </div>
                        </div>
                    </form>
                    <hr>
                    <div class="layui-row">
                        <div class="layui-col-space15 scrollbar height-700" id="live-list">
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="public/footer"/}
<script type="text/javascript">
    layui.use(['flow','layer','form'], function(){
        var layer = layui.layer, flow = layui.flow, form = layui.form, $=layui.jquery;
        
        $(function(){
            loadList();  // 加载列表
        })

        // 分页加载列表
        function loadList(keyword=''){
            var limit = 10;//每次请求的条数
            flow.load({
                elem: '#live-list' //指定列表容器
                ,scrollElem: '#live-list'//滚动条所在元素
                ,end: '—— 已经到底了~ ——'
                ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页的回调
                    $.ajax({
                        type: "post",
                        dataType: "json",
                        data: {'page': page, 'limit':limit, 'keyword':keyword},//请求的页码和每页显示条数
                        url: '/user/live',
                        success: function (res) {
                            var lis = [];
                            if(res.code == 0){
                                if (res.data.length > 0) {
                                    
                                    var newsHtml = '';
                                    layui.each(res.data, function(index, item){
                                       
                                        newsHtml += `<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                                                        <div class="layui-card product-item">
                                                            <a href="/live/detail?id=${item.product_id}">
                                                                <div class="layui-card-header">
                                                                    <div class="live-time">
                                                                        <i class="layui-icon layui-icon-group"></i>
                                                                        <span class="text">${item.max_users}</span>
                                                                    </div>
                                                                </div>
                                                                <div class="layui-card-body">
                                                                    <div class="item">
                                                                        <img src="${item.head_imgs}" class="user-course-img">
                                                                        <div class="detail height-80">
                                                                            <div class="product-title layui-ellips">
                                                                                <span class="item-title-label">${item.product_type_text}</span>${item.name}
                                                                            </div>
                                                                            <p style="color:#999;margin-top: 5px;">规格： ${item.attr.name}</p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </a>
                                                            <div class="layui-card-footer">
                                                                <p class="text">
                                                                    总课时：${item.hour.total_hour}
                                                                    <span lay-separator="" style="margin: 0px 10px;color:#ddd;">|</span>
                                                                    剩余课时：${item.hour.surplus_hour}
                                                                </p>
                                                                <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-sm live-study"><i class="layui-icon layui-icon-video" style="font-weight: bold;"></i> 看直播</a>
                                                            </div>
                                                        </div>
                                                    </div>`;
                                    });
                                    
                                    lis.push(newsHtml);
                                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                                    //res.total为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                                    next(lis.join(''), page < Math.ceil(res.count/limit));
                                    
                                } else {
                                    $('#live-list').html('<div class="layui-empty"><img src="/static/images/nodata/no_course.png"><p>暂无直播课数据~</p></div>');
                                }
                            } else {
                                layer.msg(res.msg, {icon:2, time: 1500});
                            }
                        }
                        ,error:function(e){
                            layer.closeAll();
                            layer.msg("请求失败："+e.msg, {icon:2, time: 1500});
                        },
                    });
                }
            });
        }

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var keyword = $("#keyword").val();
            $("#live-list").html('');
            loadList(keyword);
            return false;
        })
        
        // 看直播
        $(document).on('click', '.live-study', function(){
            layer.confirm('暂不支持PC端直播学习，请你使用APP/微信小程序等手机客户端进行直播学习。', {
                skin: 'layui-layer-radius', // 弹窗主题样式
                title : '提示',
                area: '420px',
                btn: ['知道了', '取消'],
            },function(index){
                layer.close(index);
            })
        })
        
    });

</script>